<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  <meta name="theme-color" content="#000000"/>
  <title>人码合一 - Louis Han</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'tech-blue': '#0080ff',
            'tech-red': '#ff0040',
            'dark-bg': '#000000',
            'dark-surface': '#0a0a0a',
            'dark-card': '#111111',
          }
        },
      },
    }
  </script>

  <style>
    pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #F00 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666 } /* Operator */
.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #9C6500 } /* Comment.Preproc */
.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.codehilite .gr { color: #E40000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #008400 } /* Generic.Inserted */
.codehilite .go { color: #717171 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #04D } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #687822 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #00F; font-weight: bold } /* Name.Class */
.codehilite .no { color: #800 } /* Name.Constant */
.codehilite .nd { color: #A2F } /* Name.Decorator */
.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #00F } /* Name.Function */
.codehilite .nl { color: #767600 } /* Name.Label */
.codehilite .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #BBB } /* Text.Whitespace */
.codehilite .mb { color: #666 } /* Literal.Number.Bin */
.codehilite .mf { color: #666 } /* Literal.Number.Float */
.codehilite .mh { color: #666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666 } /* Literal.Number.Oct */
.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #00F } /* Name.Function.Magic */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
.codehilite .il { color: #666 } /* Literal.Number.Integer.Long */

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #000;
      color: #e5e5e5;
    }

    /* 简单边框 */
    .tech-border {
      border: 1px solid rgba(0, 128, 255, 0.2);
    }

    /* 导航链接 */
    .nav-link {
      position: relative;
      color: #888;
      transition: color 0.3s;
      text-decoration: none;
    }

    .nav-link:hover {
      color: #0080ff;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: #0080ff;
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* 移动端菜单 */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    /* 移动端导航链接 */
    .mobile-nav-link {
      display: block;
      padding: 0.75rem 0;
      color: #d1d5db;
      text-decoration: none;
      transition: color 0.2s;
      font-weight: 500;
    }

    .mobile-nav-link:hover {
      color: #0080ff;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #111;
    }

    ::-webkit-scrollbar-thumb {
      background: #333;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #444;
    }

    /* 代码高亮优化 */
    .highlight {
      background: #0a0a0a;
      border: 1px solid #222;
      border-radius: 8px;
      padding: 1rem;
      overflow-x: auto;
    }

    .highlight pre {
      margin: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      line-height: 1.5;
    }
  </style>
</head>

<body class="min-h-screen bg-dark-bg">
  <!-- 导航栏 -->
  <header class="sticky top-0 z-40 bg-dark-surface/95 backdrop-blur-sm border-b tech-border">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <a href="/" class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-tech-blue rounded-lg flex items-center justify-center">
            <span class="font-mono font-bold text-white">LH</span>
          </div>
          <span class="font-bold text-xl text-white hidden sm:block">louishwh</span>
        </a>

        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-8">
            <a href="/" class="nav-link">Author</a>
            <a href="/blog" class="nav-link">Blogs</a>
            <a href="/projects" class="nav-link">Projects</a>

<!--          <a href="/books" class="nav-link">Books</a>-->
<!--          <a href="/papers" class="nav-link">Papers</a>-->
<!--          <a href="/companies" class="nav-link">Companies</a>-->
<!--            <a href="/showcase" class="nav-link">Showcase</a>-->
            <a href="/contact" class="nav-link">Contact</a>
        </nav>

        <!-- 移动端菜单按钮 -->
        <button id="menu-btn" class="md:hidden p-2 text-gray-400 hover:text-white">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="mobile-menu fixed top-16 right-0 bottom-0 w-64 bg-dark-surface border-l tech-border md:hidden">
      <nav class="p-6 space-y-1">
        <a href="/" class="mobile-nav-link">Author</a>
          <a href="/blog" class="mobile-nav-link">Blogs</a>
        <a href="/projects" class="mobile-nav-link">Projects</a>
<!--        <a href="/books" class="mobile-nav-link">Books</a>-->
<!--        <a href="/papers" class="mobile-nav-link">Papers</a>-->
<!--        <a href="/companies" class="mobile-nav-link">Companies</a>-->
<!--        <a href="/showcase" class="mobile-nav-link">Showcase</a>-->
        <a href="/contact" class="mobile-nav-link">Contact</a>
      </nav>
    </div>
  </header>

  <!-- 主内容 -->
  <main class="min-h-screen">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
      
<div class="max-w-6xl mx-auto">
  <!-- 个人简介 -->
  <section class="mb-16">
    <div class="flex flex-col lg:flex-row items-center gap-8 mb-12">
      <div class="w-32 h-32 bg-gradient-to-br from-tech-blue to-purple-600 rounded-full flex items-center justify-center text-white text-3xl font-bold shadow-lg">
        LH
      </div>
      <div class="text-center lg:text-left">
        <h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
          Louis Han
        </h1>
        <p class="text-xl text-gray-300 mb-4">
          资深AI工程师 · 全栈开发专家 · 区块链技术专家
        </p>
        <div class="flex flex-wrap gap-4 justify-center lg:justify-start">
          <span class="px-4 py-2 bg-tech-blue/20 text-tech-blue rounded-full text-sm font-medium">
            10+ 年开发经验
          </span>
          <span class="px-4 py-2 bg-green-500/20 text-green-400 rounded-full text-sm font-medium">
            金融科技专家
          </span>
          <span class="px-4 py-2 bg-purple-500/20 text-purple-400 rounded-full text-sm font-medium">
            AI系统架构师
          </span>
        </div>
      </div>
    </div>

    <div class="bg-dark-card rounded-lg tech-border p-8">
      <p class="text-lg leading-relaxed text-gray-300">
        我是一名拥有<strong class="text-white">10+年软件开发经验</strong>的技术专家，
        专注于<strong class="text-tech-blue">AI工程化</strong>、<strong class="text-tech-blue">全栈开发</strong>和<strong class="text-tech-blue">区块链技术</strong>。
        在金融科技领域有深入的业务理解，主导过多个大型AI项目的设计与实现，
        包括个人AI助手、舆情监控系统、金融新闻分析系统等。
        具备从传统软件开发到前沿AI技术的完整转型经验。
      </p>
    </div>
  </section>

  <!-- 核心能力 -->
  <section class="mb-16">
    <h2 class="text-3xl font-bold text-white mb-8 text-center">🚀 核心能力</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="text-4xl mb-4 text-center">🤖</div>
        <h3 class="text-xl font-semibold text-white mb-3 text-center">AI工程化</h3>
        <ul class="text-gray-400 text-sm space-y-1">
          <li>• LLM集成与优化</li>
          <li>• RAG系统设计</li>
          <li>• AI Agent架构</li>
          <li>• 知识图谱应用</li>
        </ul>
      </div>

      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="text-4xl mb-4 text-center">🏗️</div>
        <h3 class="text-xl font-semibold text-white mb-3 text-center">系统架构</h3>
        <ul class="text-gray-400 text-sm space-y-1">
          <li>• 微服务架构设计</li>
          <li>• 分布式系统</li>
          <li>• 高并发处理</li>
          <li>• 系统监控</li>
        </ul>
      </div>

      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="text-4xl mb-4 text-center">⛓️</div>
        <h3 class="text-xl font-semibold text-white mb-3 text-center">区块链技术</h3>
        <ul class="text-gray-400 text-sm space-y-1">
          <li>• 智能合约开发</li>
          <li>• 钱包系统设计</li>
          <li>• DeFi应用</li>
          <li>• 密码学算法</li>
        </ul>
      </div>

      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="text-4xl mb-4 text-center">💼</div>
        <h3 class="text-xl font-semibold text-white mb-3 text-center">金融科技</h3>
        <ul class="text-gray-400 text-sm space-y-1">
          <li>• 量化交易系统</li>
          <li>• 风控系统</li>
          <li>• 舆情监控</li>
          <li>• 金融数据分析</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- 技术栈 -->
  <section class="mb-16">
    <h2 class="text-3xl font-bold text-white mb-8 text-center">🛠️ 技术栈</h2>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- AI/ML技术 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
          <span class="text-2xl mr-2">🤖</span>
          AI/ML技术
        </h3>
        <div class="flex flex-wrap gap-2">
          <span class="tech-tag primary">RAG</span>
          <span class="tech-tag primary">GraphRAG</span>
          <span class="tech-tag">LangChain</span>
          <span class="tech-tag">LangGraph</span>
        </div>
      </div>

      <!-- 编程语言 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
          <span class="text-2xl mr-2">💻</span>
          编程语言
        </h3>
        <div class="flex flex-wrap gap-2">
          <span class="tech-tag primary">Python</span>
          <span class="tech-tag primary">Rust</span>
          <span class="tech-tag">Java</span>
          <span class="tech-tag">Kotlin</span>
          <span class="tech-tag">Swift</span>
        </div>
      </div>

      <!-- 后端框架 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
          <span class="text-2xl mr-2">🚀</span>
          后端框架
        </h3>
        <div class="flex flex-wrap gap-2">
          <span class="tech-tag primary">FastAPI</span>
          <span class="tech-tag primary">SpringBoot</span>
          <span class="tech-tag">Axum</span>
        </div>
      </div>

      <!-- 数据库 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
          <span class="text-2xl mr-2">🗄️</span>
          数据库
        </h3>
        <div class="flex flex-wrap gap-2">
          <span class="tech-tag primary">MySQL</span>
          <span class="tech-tag primary">PostgreSQL</span>
          <span class="tech-tag primary">Redis</span>
          <span class="tech-tag">Neo4j</span>
          <span class="tech-tag">Qdrant</span>
          <span class="tech-tag">Milvus</span>
          <span class="tech-tag">MongoDB</span>
        </div>
      </div>
    </div>
  </section>

  <!-- 核心项目 -->
  <section class="mb-16">
    <h2 class="text-3xl font-bold text-white mb-8 text-center">🏆 核心项目</h2>
    <div class="space-y-6">
      <!-- DescartCan AI系统 -->
      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
          <h3 class="text-2xl font-semibold text-white mb-2 lg:mb-0">🤖 DescartCan AI系统</h3>
          <div class="flex gap-2">
            <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">生产环境</span>
            <span class="px-3 py-1 bg-tech-blue/20 text-tech-blue rounded-full text-sm">2025</span>
          </div>
        </div>
        <p class="text-gray-300 mb-4 leading-relaxed">
          构建完整的AI Agent系统，实现NFT钱包接入功能，集成知识图谱技术和检索增强生成(RAG)功能，
          使用Qdrant、Milvus等向量数据库。深入研究AutoGPT、CrewAI等AI Agent技术，构建了自己的AI Agent框架。
        </p>
        <div class="flex flex-wrap gap-2">
          <span class="tech-badge">Python</span>
          <span class="tech-badge">FastAPI</span>
          <span class="tech-badge">LangChain</span>
          <span class="tech-badge">Qdrant</span>
          <span class="tech-badge">NFT</span>
          <span class="tech-badge">MetaMask</span>
        </div>
      </div>

      <!-- TraderWTF AI量化交易系统 -->
      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
          <h3 class="text-2xl font-semibold text-white mb-2 lg:mb-0">📈 TraderWTF AI量化交易系统</h3>
          <div class="flex gap-2">
            <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm">开发中</span>
            <span class="px-3 py-1 bg-tech-blue/20 text-tech-blue rounded-full text-sm">2025</span>
          </div>
        </div>
        <p class="text-gray-300 mb-4 leading-relaxed">
          基于AI的量化交易系统架构设计，集成微软qlib量化库，生成买入卖出信号，
          支持专家分析、盯盘和复盘功能。采用微服务架构，包含8个独立服务模块。
        </p>
        <div class="flex flex-wrap gap-2">
          <span class="tech-badge">Python</span>
          <span class="tech-badge">微软qlib</span>
          <span class="tech-badge">AI</span>
          <span class="tech-badge">量化交易</span>
          <span class="tech-badge">微服务</span>
        </div>
      </div>

      <!-- 维基区块链彩票 -->
      <div class="bg-dark-card rounded-lg tech-border p-6 hover:bg-gray-900 transition-colors">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
          <h3 class="text-2xl font-semibold text-white mb-2 lg:mb-0">⛓️ 维基区块链彩票</h3>
          <div class="flex gap-2">
            <span class="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm">已上线</span>
            <span class="px-3 py-1 bg-tech-blue/20 text-tech-blue rounded-full text-sm">2018</span>
          </div>
        </div>
        <p class="text-gray-300 mb-4 leading-relaxed">
          基于区块链技术构建的去中心化彩票生态系统，支持江西福彩、四川福彩等多种地方彩票玩法。
          购票交易实时上链，确保数据不可篡改，集成IoT智能终端，实现自动化出票流程。
        </p>
        <div class="flex flex-wrap gap-2">
          <span class="tech-badge">区块链</span>
          <span class="tech-badge">智能合约</span>
          <span class="tech-badge">WICC</span>
          <span class="tech-badge">IoT</span>
          <span class="tech-badge">去中心化</span>
        </div>
      </div>
    </div>
  </section>

  <!-- 工作经历 -->
  <section class="mb-16">
    <h2 class="text-3xl font-bold text-white mb-8 text-center">💼 工作经历</h2>
    <div class="space-y-8">
      <!-- 华通证券 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
          <div>
            <h3 class="text-2xl font-semibold text-white">华通证券</h3>
            <p class="text-tech-blue font-medium">AI工程师/技术专家</p>
          </div>
          <span class="text-gray-400 font-mono">2020年至今</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-white mb-2">主要成就：</h4>
            <ul class="space-y-1 text-sm">
              <li>• 构建完整的AI Agent系统</li>
              <li>• AI舆情监控</li>
              <li>• 金融新闻AI分析系统</li>
              <li>• AI量化交易系统设计</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-white mb-2">技术栈：</h4>
            <div class="flex flex-wrap gap-1">
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">Python</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">FastAPI</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">AI/ML</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">RAG</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 深圳天航科技 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
          <div>
            <h3 class="text-2xl font-semibold text-white">深圳天航科技（维基链）</h3>
            <p class="text-tech-blue font-medium">区块链开发工程师</p>
          </div>
          <span class="text-gray-400 font-mono">2018-2020</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-white mb-2">主要成就：</h4>
            <ul class="space-y-1 text-sm">
              <li>• 维基区块链彩票系统</li>
              <li>• 维基竞猜App开发</li>
              <li>• Python钱包库维护</li>
              <li>• BaaS监控平台</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-white mb-2">技术栈：</h4>
            <div class="flex flex-wrap gap-1">
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">区块链</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">智能合约</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">Python</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">钱包开发</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 策维科技 -->
      <div class="bg-dark-card rounded-lg tech-border p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-4">
          <div>
            <h3 class="text-2xl font-semibold text-white">策维科技</h3>
            <p class="text-tech-blue font-medium">iOS开发工程师</p>
          </div>
          <span class="text-gray-400 font-mono">2016-2018</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-white mb-2">主要成就：</h4>
            <ul class="space-y-1 text-sm">
              <li>• 车管家企业车辆管理系统</li>
              <li>• 爱派企业管理系统</li>
              <li>• iOS客户端从0到1开发</li>
              <li>• 移动端架构设计</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-white mb-2">技术栈：</h4>
            <div class="flex flex-wrap gap-1">
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">iOS</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">Swift</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">IoT</span>
              <span class="px-2 py-1 bg-gray-800 text-xs rounded">GPS</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系方式 -->
  <section class="text-center">
    <h2 class="text-3xl font-bold text-white mb-8">📫 联系我</h2>
    <div class="flex justify-center gap-6 flex-wrap">
      <a href="mailto:louis@example.com" class="contact-link">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
        </svg>
        Email
      </a>
      <a href="https://github.com/louishwh" class="contact-link">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
        </svg>
        GitHub
      </a>
<!--      <a href="https://linkedin.com/in/louishan" class="contact-link">-->
<!--        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">-->
<!--          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>-->
<!--        </svg>-->
<!--        LinkedIn-->
<!--      </a>-->
      <a href="https://louishwh.tech" class="contact-link">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9m0 9c-5 0-9-4-9-9s4-9 9-9"/>
        </svg>
        Website
      </a>
    </div>
  </section>
</div>

<!-- 样式 -->
<style>
  /* 技术标签 */
  .tech-tag {
    @apply px-3 py-1 bg-gray-800 text-gray-300 rounded-full text-sm font-medium hover:bg-gray-700 transition-colors cursor-pointer;
  }

  .tech-tag.primary {
    @apply bg-tech-blue/20 text-tech-blue hover:bg-tech-blue/30;
  }

  /* 技术徽章 */
  .tech-badge {
    @apply px-3 py-1 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700 hover:border-tech-blue/50 hover:text-tech-blue transition-colors;
  }

  /* 联系链接 */
  .contact-link {
    @apply inline-flex items-center gap-3 px-6 py-3 bg-dark-card text-gray-300 rounded-lg tech-border hover:text-tech-blue hover:border-tech-blue/50 transition-all font-medium;
  }

  .contact-link:hover {
    @apply transform -translate-y-1 shadow-lg;
  }

  /* 响应式优化 */
  @media (max-width: 768px) {
    .tech-tag, .tech-badge {
      @apply text-xs px-2 py-1;
    }
  }
</style>

    </div>
  </main>

  <!-- 页脚 -->
  <footer class="border-t tech-border mt-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
      <!-- 信息卡片组 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">

        <!-- 品牌卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border text-center">
          <h3 class="text-2xl font-bold text-white mb-2">人码合一</h3>
          <p class="text-sm text-gray-400">HUMAN CODE UNITY</p>
        </div>
        
        <!-- 状态卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border">
          <h4 class="text-sm font-mono text-gray-400 mb-3">SYSTEM STATUS</h4>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-500">Version</span>
              <span class="font-mono text-tech-blue">v3.0.1</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">Status</span>
              <span class="font-mono text-green-500">ONLINE</span>
            </div>
          </div>
        </div>

        <!-- 社交卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border">
          <h4 class="text-sm font-mono text-gray-400 mb-3">CONNECT</h4>
          <div class="flex space-x-4">
            <a href="https://github.com/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
            </a>
            <a href="https://twitter.com/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
              </svg>
            </a>
            <a href="https://linkedin.com/in/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
              </svg>
            </a>
            <a href="mailto:louis@example.com" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-gray-800">
        <div class="flex items-center space-x-4 mb-4 md:mb-0">
          <span class="text-sm text-gray-500">© 2025 Louis Han</span>
          <span class="text-sm text-gray-500">|</span>
          <span class="text-sm text-gray-500">人码合一</span>
        </div>

        <div class="flex items-center space-x-4 text-xs text-gray-600">
          <span>Built with ❤️</span>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 移动端菜单控制
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
        let isMenuOpen = false;

    menuBtn.addEventListener('click', () => {
      isMenuOpen = !isMenuOpen;
      mobileMenu.classList.toggle('active', isMenuOpen);
      document.body.style.overflow = isMenuOpen ? 'hidden' : '';
    });

    // 点击菜单外关闭
    document.addEventListener('click', (e) => {
      if (isMenuOpen && !mobileMenu.contains(e.target) && !menuBtn.contains(e.target)) {
        isMenuOpen = false;
        mobileMenu.classList.remove('active');
        document.body.style.overflow = '';
      }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });

    // 页面加载完成后添加淡入效果
    window.addEventListener('load', () => {
      document.body.style.opacity = '1';
    });
  </script>

  <style>
    /* 初始状态 */
    body {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* 打印样式 */
    @media print {
      header, footer {
        display: none !important;
      }

      body {
        background: white !important;
        color: black !important;
      }

      .tech-border {
        border-color: #ddd !important;
      }
    }

    /* 响应式优化 */
    @media (max-width: 640px) {
      .highlight {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
    }
  </style>
</body>
</html>